// 摇奖框滚动方法
function lottery(el, participator) {
    // 定义一个setInterval
    let i = setInterval(() => {
        // 如果只有一个人了则使用摇奖框滚动时的虚构人员
        if (participator.length === 1) {
            $(el).text(temp_staff[Math.floor(Math.random() * temp_staff.length)])
            $(el).addClass('oneStaffsClass')
        } else { // 否则 正常使用参与人员
            let staff = participator[Math.floor(Math.random() * participator.length)]
            $(el).text(staff)
            $(el).addClass('oneStaffsClass')
        }
    }, 20)
    // 构建计数器
    const interval = {counter: i, el: el}
    // 构建计数器添加到集合中
    interval_array.push(interval)
}

// 显示中奖结果方法
function showAllWinner() {
    const mainDiv = $('#main_div')
    // 清空 主界面
    $(mainDiv).empty();
    // 主界面添加特有Class
    $(mainDiv).addClass('resultDivBox')
    //  遍历中奖结果
    for (let dr of drawResults) {
        //  获取奖项名称
        const name = dr.name
        //  获取该项的获奖者
        const winners = dr.winner
        // 构建该项的显示div
        const div = $('<div class="resultDiv"></div>')
        $(mainDiv).append($(div))
        //  添加标题
        $(div).append(`<h2 class="resultTitle">${name}</h2>`)
        // 添加中奖人员的Div
        const div2 = $('<div class="staffsDiv"></div>')
        $(div).append($(div2))
        // 添加中奖人员
        for (let winner of winners) {
            $(div2).append(`<div class="staffNameDiv">${winner}</div>`)
        }
    }
    //  添加 返回 按钮
    const homeBtn = $('<span class="homeBtn">返回首页</span>')
    //  返回按钮绑定事件
    $(homeBtn).click(function () {
        $.confirm({
            title: '返回首页',
            content: '返回首页将丢失已获奖人员名单,是否返回?',
            animation: "scale",
            backgroundDismiss: true,
            buttons: {
                "返回首页": function () {
                    //  重置 结束符 开始符 设置load 重新加载页面
                    over = false
                    starting = false
                    // load 为 关闭页面和刷新页面的 flag 如果不设置为True 则会无限刷新页面
                    load = true
                    location.reload()
                },
                "取 消": () => {
                }
            }
        });
    })
    //  添加返回按钮
    $(mainDiv).append(homeBtn)
}

/**
 * 开始方法 年会抽奖
 * @param name 奖项名称
 * @param divs 抽奖框Div
 * @param btn 开始按钮
 * @param repeated 该奖项的获奖者是否可以重复
 * @param quantity 获奖个数
 * */
function start(name, divs, btn, repeated, quantity) {
    // 获取获奖结果集合并删除已经存在的该奖项结果
    const winners_findIndex = drawResults.findIndex(ws => ws.name === name);
    if (winners_findIndex >= 0) {
        drawResults.splice(winners_findIndex, 1)
    }
    // 定义一个该项的获奖结果
    const awards_winners = {
        "name": name,
        "winner": []
    }
    // 声明该次奖项的参与人员
    let participator = []
    // 检查是否可以重复
    if (repeated === 0) {
        // 遍历定义的所有参与人员
        for (let staff of staffs) {
            // 检查staff是否已经中过将
            const findIndex = drawResults.findIndex(ws => ws.winner.includes(staff))
            if (findIndex < 0) {
                // 没有中奖则 加入到该次奖项的参与人员
                // 此处使用深复制 避免 污染 staffs
                participator.push(JSON.parse(JSON.stringify(staff)))
            }
        }
    } else {
        // 可以重复
        participator = JSON.parse(JSON.stringify(staffs))
    }
    //  检查参与者人数
    function checkParticipatorSize() {
        //  如果所有人员都已经中奖 则没有人员被加入到participator中 , 询问是否重新加入所有人员
        if (participator.length === 0) {
            $.confirm({
                title: '重新载入人员',
                content: '参与人数为0,是否重新加入所有人员?',
                animation: "scale",
                backgroundDismiss: true,
                buttons: {
                    "载入人员": function () {
                        participator = JSON.parse(JSON.stringify(staffs))
                    },
                    "取 消": () => {
                        $.alert({title: "提示", content: "无可参与人员"})
                        checkParticipatorSize()
                    }
                }
            });
        }
    }
    checkParticipatorSize()
    // 根据最终人员数量即规定的获奖数量减少摇奖框
    if (participator.length < divs.length) {
        divs.splice(0, participator.length - divs.length)
    }
    // 重置摇奖框的定时器集合
    interval_array = []
    // 给每个摇奖框开始随机滚动参与人员 并将每个定时器加入到 interval_array
    for (let div of divs) {
        lottery(div, participator)
    }
    //  取消绑定[开始]按钮的点击事件
    $(btn).unbind('click')
    // 修改[开始]摇奖按钮的Label为停止
    $(btn).text('停止')
    // 重新给停止按钮绑定点击事件
    $(btn).click(function () {
        // 重置摇奖的音频起始位置为0
        const yjAudio = $("#yjAudio").get(0)
        yjAudio.currentTime = 0
        // 播放摇奖音频
        yjAudio.play()
        // 点击停止按钮修改了label=即将揭晓
        $(btn).text('即将揭晓')
        // 设置倒计时3秒
        let i = 3
        // 创建倒计时框
        const countdowns = $(`<h1 class="countdowns">${i}</h1>`)
        // 加入到box中
        $('#box').append(countdowns)
        // 设定循环 开始倒计时
        setInterval(function () {
            // 每执行一次就减少一次倒计时
            i--
            //  将减少后的时间赋值给倒计时框
            $(countdowns).text(i)
            //  如果倒计时结束
            if (i === 0) {
                // 停止计时
                clearInterval(this)
                // 停止摇奖音频
                yjAudio.pause()
                //  移除倒计时框
                $(countdowns).remove()
                // 停止所有摇奖框的 随机滚动 避免人员重复
                for (let interval of interval_array) {
                    const counter = interval.counter
                    const el = interval.el
                    // 清除循环
                    clearInterval(counter)
                    // 从参与人员中随机获取一位
                    const s = participator[Math.floor(Math.random() * participator.length)]
                    // 将随机获取的人员赋值给 抽奖框
                    $(el).text(s)
                    // 从该奖项的参与者中 删除 该摇奖框中的获奖人 s
                    const pp_index = participator.findIndex(pp => pp === s)
                    if (pp_index >= 0) {
                        participator.splice(pp_index, 1)
                    }
                }
                //  创建中奖人员的展示Div
                const divImgBox = $(`<div id="divImgBoxId" class="divImgBox"></div>`)
                //  添加到BOX
                $('#box').append($(divImgBox))
                //  播放烟花音频
                const yhAudio = $("#yhAudio").get(0)
                yhAudio.play()
                //  定义摇奖框的index
                let d = 0
                // 循环将中奖者显示出来
                let tmp = setInterval(function () {
                    // 获取第d个摇奖框
                    const div = divs[d]
                    // 创建 中奖者给显示框
                    let divImg
                    // 数量少则构造中奖大图
                    if (quantity <= 10) {
                        if (quantity === 1) {
                            divImg = $(`<div class="divImg_max"></div>`)
                        } else {
                            divImg = $(`<div class="divImg_min"></div>`)
                        }
                    } else { // 数量多则构造中奖小图
                        divImg = $(`<div class="minImg"></div>`)
                    }
                    // 获取这个Div中的获奖人员名称
                    const winner = $(div).text()
                    // 将中奖人员名称 设置给 中奖图的Div中
                    $(divImg).text(winner)
                    // 将该显示框添加到 中奖盒子中
                    $(divImgBox).append($(divImg))
                    // 将中奖者名称添加到本奖项的中奖者列表中
                    awards_winners.winner.push(winner)
                    //  如果 中奖框 已经遍历完
                    if (d >= divs.length - 1) {
                        // 将本奖项的中奖者添加到中奖结果中
                        drawResults.push(awards_winners)
                        //  本地化 中奖者  该本地化无用,只是为了防止误操作关闭了浏览器
                        localStorage.setItem('drawResults', JSON.stringify(drawResults))
                        //  如果流程尚未结束 则 流程index++
                        if (sweepstakesItems_index < (sweepstakesItems.length - 1)) {
                            sweepstakesItems_index++
                        } else {
                            // 否则 设置抽奖环节结束
                            over = true
                        }
                        //  摇奖中 设置 否
                        starting = false
                        let tmp_i = 2
                        // 两秒后显示 继续按钮
                        const ti = setInterval(() => {
                            //  两秒后
                            if (tmp_i === 0) {
                                // 清除循环
                                clearInterval(ti)
                                // 定义按钮 文字
                                let str = '点击此处继续'
                                // 判断流程结束
                                if (over) {
                                    str = '抽奖环节已经结束,点击此处显示所有获奖者'
                                }
                                // 创建 继续按钮
                                const nextBtn = $(`<span class="nextBtn">${str}</span>`)
                                // 继续按钮绑定方法
                                $(nextBtn).click(function () {
                                    //  停止 烟花音效
                                    yhAudio.pause()
                                    // 移除获奖Div
                                    $('#divImgBoxId').remove()
                                    if (over) {
                                        //  如果流程已经结束 调用显示所有中奖者
                                        showAllWinner()
                                    } else {
                                        //  调用进入抽奖方法
                                        enterStart()
                                    }
                                })
                                //  添加继续按钮 到 获奖人员展示Div
                                $(divImgBox).append(nextBtn)
                            }
                            tmp_i--
                        })
                        //  取消循环显示
                        clearInterval(tmp)
                    }
                    d++
                }, quantity <= 10 ? 200 : 100)
                //  给 开始/停止按钮解绑 click方法
                $(btn).unbind('click')
            }
        }, 800)

    })
}

/**
 * 进入摇奖页面方法
 * */
function enterStart() {
    // 设置 开始
    starting = true
    const mainDiv = $('#main_div')
    // 清空主div
    $(mainDiv).empty();
    // 添加特有的class
    $('#main').addClass('startDivClass')
    // 根据index获取奖项内容
    const award = sweepstakesItems[sweepstakesItems_index]
    // 获取奖项名称
    const name = award['名称']
    // 获取奖品
    const prize = award['奖品']
    // 获取设定的获奖人数
    const quantity = award['数量']
    // 获取是否可以重复获奖(指 已经获得奖项的人员是否可以参与该奖项的抽奖)
    const repeated = award['中奖人员可重复']
    // 设置奖项名称
    $(mainDiv).append(`<h1 style="text-align: center">${name} ${prize} ${quantity}个</h1>`)
    // 添加 摇奖的 框的盒子
    const nameBoxs = $('<div class="nameBoxs"></div>')
    $(mainDiv).append($(nameBoxs))
    let divs = []
    // 根据设定的获奖人数 添加 摇奖的 框,此处设置了多少个获奖人数 则添加多少个摇奖框, 如果实际人数不足 则另行在开始后处理
    for (let i = 0; i < quantity; i++) {
        let div = ''
        if (quantity <= 5) {
            //  人数小于等于5人则构建大div
            div = $('<div class="drawBox drawBox_max">????</div>')
        } else {
            //  否则构建小div
            div = $('<div class="drawBox drawBox_min">????</div>')
        }
        divs.push(div)
    }
    // 将构建的 摇奖框 添加到box中
    for (let div of divs) {
        $(nameBoxs).append($(div))
    }
    // 创建开始摇奖 按钮
    const btn = $('<button class="initiateBtn">点击开始</button>')
    $(mainDiv).append(btn)
    //  开始摇奖按钮的点击事件
    $(btn).click(() => start(name, divs, btn, repeated, quantity))
}